import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RankingListWrapper } from './style'
import SectionHeaderV1 from '@/components/section-header-v1'
import { useAppSelector } from '@/store'
import RankingItem from '@/components/ranking-item'

interface IProps {
  children?: ReactNode
}

const RankingList: React.FC<IProps> = () => {
  const rankingList = useAppSelector((state) => {
    return state.recommend.rankingList
  })

  return (
    <RankingListWrapper>
      <SectionHeaderV1 title="榜单" morePath="/discover/ranking" />
      <div className='rankings'>
        {rankingList.map((item) => {
          return <RankingItem key={item.id} itemData={item}/>
        })}
      </div>
    </RankingListWrapper>
  )
}

export default memo(RankingList)
